<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
dl { float: left; margin: 4px 20px; border: solid 1px blue; padding: 12px; }
dl span { color: red; float: right; }
dd { width: 360px; }
footer { display: none; }
</style>
<script type="text/javascript">
function createrange() {
    var range1 = document.createRange();
    var range2 = document.createRange();
    var main= document.getElementById("main");
	var p = main.getElementsByTagName("p")[0];
	var text = p.firstChild;
    range1.setStart(main, 1);
    range1.setEnd(main, 4);
    range2.setStart(text, 0);
    range2.setEnd(text, 5);


    var footer = document.getElementsByTagName("footer")[0];
	footer.style.display = "block";
    document.getElementById("txtStartContainer1").textContent = range1.startContainer.tagName;
    document.getElementById("txtStartOffset1").textContent = range1.startOffset;
    document.getElementById("txtEndContainer1").textContent = range1.endContainer.tagName;
    document.getElementById("txtEndOffset1").textContent = range1.endOffset;
    document.getElementById("txtCommonAncestor1").textContent = range1.commonAncestorContainer.tagName;
	document.getElementById("range1Text1").textContent = range1.toString();

    document.getElementById("txtStartContainer2").textContent = "节点类型 " + range2.startContainer.nodeType;
    document.getElementById("txtStartOffset2").textContent = range2.startOffset;
    document.getElementById("txtEndContainer2").textContent = "节点类型 " + range2.endContainer.nodeType;
    document.getElementById("txtEndOffset2").textContent = range2.endOffset;
    document.getElementById("txtCommonAncestor2").textContent = "节点类型 " + range2.commonAncestorContainer.nodeType;
	document.getElementById("range1Text2").textContent = range2.toString();
}
</script>
</head>

<body>
<section id="wrap">
    <article id="main">
        <h1>游子吟</h1>
        <h2>孟郊</h2>
        <p>慈母手中线，游子身上衣。临行密密缝，意恐迟迟归。谁言寸草心，报得三春晖。</p>
    </article>
    <header>
        <input type="button" value="创建范围" onclick="createrange()" />
    </header>
    <footer>
        <dl>
            <dt>范围1</dt>
            <dd>Start Container(开始点的父节点）:<span id="txtStartContainer1"></span></dd>
            <dd>Start Offset(开始点的偏移值）:<span id="txtStartOffset1"></span></dd>
            <dd>End Container(结束点的父节点）:<span id="txtEndContainer1"></span></dd>
            <dd>End Offset(结束点的偏移值）:<span id="txtEndOffset1"></span></dd>
            <dd>Common Ancestor（共同祖先节点）:<span id="txtCommonAncestor1"></span></dd>
            <dd>选取文本:<span id="range1Text1"></span></dd>
        </dl>
        <dl>
            <dt>范围2</dt>
            <dd>Start Container(开始点的父节点）:<span id="txtStartContainer2"></span></dd>
            <dd>Start Offset(开始点的偏移值）:<span id="txtStartOffset2"></span></dd>
            <dd>End Container(结束点的父节点）:<span id="txtEndContainer2"></span></dd>
            <dd>End Offset(结束点的偏移值）:<span id="txtEndOffset2"></span></dd>
            <dd>Common Ancestor（共同祖先节点）:<span id="txtCommonAncestor2"></span></dd>
            <dd>选取文本:<span id="range1Text2"></span></dd>
        </dl>
    </footer>
</section>
</body>
</html>
